<!DOCTYPE html>
        <html>
    <head>
        <meta charset="UTF-8">
        <title>页签</title>
        <style>
            *{
                padding: 0;
                margin: 0;

            }
            #all{
                width: 300px;
                border: 1px solid #9f9f9f;
                margin:  0 auto;
                background-color: rgba(210, 194, 249, 0.42);
            }
            #top{
                /*width: 1240px;*/
                height: 40px;
                background-color: #b7bec1;

            }

            button{
                border: 0 none;
                width: 100px;height: 40px;
            }
            #center1{
                width: 300px;
                height: 200px;
                background-color: #ffa098;
                margin: 0 auto;
            }
            #center2{
                width: 300px;
                height: 200px;
                background-color: #ffe5a7;
                margin: 0 auto;
            }
            #center3{
                width: 300px;
                height: 200px;
                background-color: #ffb9f3;
                margin: 0 auto;
            }
        </style>
        <script>
//            dom控制页面上的所有节点
//            bom模拟浏览器的行为

//           页面的所有节点都加载完成
//location地址栏
           /* 数据的类型  （5种基本类型）
             字符串（string）、
             数字（number）、
             布尔（boolean）、
             Null、（空）
             Undefined（未定义）
            typeof查看数据类型
            引用类型
             数组、（fuction）
             对象、（object）*/
//声明一个变量（）
//逻辑语法控制
//循环
            /*for(1.声明部分2，条件判断部分3.指定自加自减部分）
            while（布尔类型条件）
            do{}while（）先执行后判断是否循环
            匹配控制
            switch(){}
            *
            * */
         /*   js    dom   来做页面控制
              步骤：
                    1.获取页面元素
                      var a = document.getElementById('xxx')
                    2.控制页面元素
                        填充修改内容
                        a.innerText = '.....';
         */



//            window.onload=function () {
//            };
        </script>
    </head>
    <body>
    <div id='all'>
        <div id='top'>
           <button id="button1" style="background-color:#ffa098;">页签1</button><button id='button2' style="width: 100px;height: 40px;">页签2</button><button  id='button3' style="width: 100px;height: 40px;">页签3</button>
        </div>
        <div>
        <div id='center1' style='display: block;'>
            页签1
        </div>
        <div id='center2' style='display: none;'>
        页签2
        </div>
        <div id='center3' style='display: none;'>
       页签3
        </div>
        </div>

    </div>
    <script>
     document.getElementById("button1").onclick = function () {
         document.getElementById("center1").style.display= "block";
         document.getElementById("center2").style.display= "none";
         document.getElementById("center3").style.display= "none";
         this.style.backgroundColor = '#ffa098';
         document.getElementById('button2').style.backgroundColor = '';
         document.getElementById('button3').style.backgroundColor = '';

                };
    document.getElementById("button2").onclick = function () {
        document.getElementById("center1").style.display = "none";
        document.getElementById("center2").style.display= "block";
        document.getElementById("center3").style.display= "none";
        this.style.backgroundColor = '#ffe5a7';
        document.getElementById('button1').style.backgroundColor = '';
        document.getElementById('button3').style.backgroundColor = '';

    };
    document.getElementById("button3").onclick = function () {
        document.getElementById("center1").style.display= "none";
        document.getElementById("center2").style.display= "none";
        document.getElementById("center3").style.display= "block";
        this.style.backgroundColor = '#ffb9f3';
        document.getElementById('button2').style.backgroundColor = '';
        document.getElementById('button1').style.backgroundColor = '';

    };
    </script>
    </body>
    </html>